<template>
    <div>
        <div class="title-type">申购周期</div>
        <div class="cycle">
            <div class="cycle-left">
                <div class="cycle-left-one">
                    <el-steps :active="currentStatusOne">
                        <el-step title="预热" description></el-step>
                        <el-step title="申购" :description="this.productDetail.purchaseStartTime"></el-step>
                        <el-step title="摇号" :description="this.productDetail.purchaseEndTime"></el-step>
                        <el-step title="公布结果" :description="this.productDetail.signedTheTime"></el-step>
                        <el-step title="截止缴款" :description="this.productDetail.paymentDeadline"></el-step>
                    </el-steps>
                </div>
                <div class="cycle-left-two">
                    <div>
                        <span v-if="currentStatusTwo=='1'?true:false">预热时间</span>
                        <span v-if="currentStatusTwo=='2'?true:false">申购阶段</span>
                        <span v-if="currentStatusTwo=='3'?true:false">摇号阶段</span>
                        <span v-if="currentStatusTwo=='4'?true:false">中签阶段</span>
                        <span v-if="currentStatusTwo=='4'?true:false">截止缴款</span>
                    </div>
                    <ul>
                        <li v-if="currentStatusTwo=='1'?true:false">
                            <span>将开启申购</span>
                            <span>{{productDetail.purchaseStartTime}}</span>
                        </li>
                        <li v-if="currentStatusTwo=='2'?true:false">
                            <span>请在规定时间内完成申购确认</span>
                            <span>{{productDetail.purchaseStartTime}} - {{productDetail.purchaseEndTime}}</span>
                        </li>
                        <li v-if="currentStatusTwo=='3'?true:false">
                            <span>请关注最新的公示结果</span>
                            <span>{{productDetail.signedTheTime}}</span>
                        </li>
                        <!-- <li v-if="currentStatusTwo=='4'?true:false">
                            <span>如若您中签，平台将对您的账号进行扣款</span>
                            <span>{{productDetail.signedTheTime}}</span>
                        </li> -->
                        <li v-if="currentStatusTwo=='5'?true:false">
                            <span>请在截止时间前到订单管理页面，确认订单并支付完成缴款</span>
                            <span>{{productDetail.paymentDeadline}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="cycle-right">
                <div v-if="currentStatusTwo=='4'?false:true">
                    <p class="title-types">当前剩余时间</p>
                    <timer :endTime="endTime"></timer>
                </div>
                <div v-if="currentStatusTwo=='4'?true:false">
                    <p class="title-types four-title">当前剩余时间</p>
                </div>
                <!-- 未登录 -->
                <div v-if="currentStatusThree=='10'?true:false" class="cycle-right-center">
                    <el-button @click="$router.push({path:'/login'})" class="an-btn" type="primary" size="small">登录</el-button>
                </div>
                <!-- 预热 -->
                <div v-if="currentStatusTwo=='1'?true:false" class="cycle-right-center">
                    <ul class="one">
                        <li>申购信息</li>
                        <li>
                            <span>您还未通过申购认证</span>
                        </li>
                        <li>1 token = {{productDetail.unitPrice}} {{virtualWalletName}}</li>
                        <li>账户可用：{{canUseMoney}} {{virtualWalletName}}</li>
                        <li>
                            <div class="an-btn-an" type="primary" size="small">申购</div>
                        </li>
                    </ul>
                </div>
                <!-- 申购 -->
                <div v-if="currentStatusTwo=='2'?true:false" class="cycle-right-center">
                    <!-- 未申购 -->
                    <ul v-if="buyStatus==1?true:false" class="one">
                        <li>申购信息</li>
                        <li>
                            <span>您还未通过申购认证</span>
                        </li>
                        <li>1 token = {{productDetail.unitPrice}} {{virtualWalletName}}</li>
                        <li>账户可用：{{canUseMoney}} {{virtualWalletName}}</li>
                        <li>
                            <el-button
                                @click="buySome"
                                class="an-btn"
                                type="primary"
                                size="small"
                            >申购</el-button>
                        </li>
                    </ul>
                    <!-- 已申购 -->
                    <ul v-if="buyStatus==2?true:false" class="two">
                        <li>申购信息</li>
                        <li>申购签号</li>
                        <li>
                            <span v-for="(v,i) in buyDetail.listUserPurchaseNumber" :key="i">{{v}}</span>
                        </li>
                        <li>
                            申购价格：
                            <span>{{productDetail.unitPrice}} {{virtualWalletName}}</span>
                        </li>
                        <li>
                            申购数量：
                            <span>{{buyDetail.purchaseQuantity}} token</span>
                        </li>
                        <li>
                            申购总额：
                            <span>{{buyDetail.purchaseTotalAmount}} {{virtualWalletName}}</span>
                        </li>
                        <li @click="$router.push({path: '/purchaseHistory'})">查看申购订单>></li>
                        <li>
                            <div class="an-btn-an" type="primary" size="small">申购</div>
                        </li>
                    </ul>
                </div>
                <!-- 申购完成等待摇号 -->
                <div v-if="currentStatusTwo=='3'?true:false" class="cycle-right-center">
                    <!-- 未申购等待摇号 -->
                    <ul v-if="buyStatus==1?true:false" class="two">
                        <li>申购信息</li>
                        <li>暂无申购信息！</li>
                        <li>
                            <div class="an-btn-an" type="primary" size="small">申购</div>
                        </li>
                    </ul>
                    <!-- 已申购等待摇号 -->
                    <ul v-if="buyStatus==2?true:false" class="two">
                        <li>申购信息</li>
                        <li>申购签号</li>
                        <li>
                            <span v-for="(v,i) in buyDetail.listUserPurchaseNumber" :key="i">{{v}}</span>
                        </li>
                        <li>
                            申购价格：
                            <span>{{productDetail.unitPrice}} {{virtualWalletName}}</span>
                        </li>
                        <li>
                            申购数量：
                            <span>{{buyDetail.purchaseQuantity}} token</span>
                        </li>
                        <li>
                            申购总额：
                            <span>{{buyDetail.purchaseTotalAmount}} {{virtualWalletName}}</span>
                        </li>
                        <li @click="$router.push({path: '/purchaseHistory'})">查看申购订单>></li>
                        <li>
                            <div class="an-btn-an" type="primary" size="small">申购</div>
                        </li>
                    </ul>
                </div>
                <!-- 公布结果 -->
                <div v-if="currentStatusTwo=='4' || currentStatusTwo=='5'?true:false" class="cycle-right-center">
                    <!-- 未中签结果 -->
                    <ul v-if="buyStatus==1?true:false" class="four">
                        <li>暂无号码</li>
                        <li></li>
                        <li>
                            <span @click="$router.push({path: '/purchaseHistory'})">查看我的订单</span>
                        </li>
                    </ul>
                    <!-- 中签结果 -->
                    <ul v-if="buyStatus==2?true:false" class="four">
                        <li>中签号码</li>
                        <li>
                            <span v-for="(v,i) in signNumberList" :key="i">{{v.purchaseNumber}}</span>
                        </li>
                        <li>
                            <span @click="$router.push({path: '/purchaseHistory'})">查看我的订单</span>
                        </li>
                    </ul>
                    <!-- 中签公示 -->
                    <div class="publicity">
                        <!-- <ul>
                            <li>中签公示</li>
                            <li>
                                <span>中签号总数：</span>
                                <span>{{publicityNum.signNumber}}</span>
                            </li>
                            <li>
                                <span>中签率：</span>
                                <span>{{publicityNum.signNumberRate | baifenbi}}</span>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹框 -->
        <div class="bg" v-if="bgShow">
            <!-- 申购 -->
            <div class="subscribe" v-if="subscribeShowOne==1?true:false">
                <div class="title">
                    <span></span>
                    <span>申购</span>
                    <span @click="colseSubscribe">
                        <img src="../../assets/images/daxin/close.png" alt />
                    </span>
                </div>
                <div class="price">
                    <img src="../../assets/images/daxin/tishi.png" alt />
                    <span>申购价：1 token = {{productDetail.unitPrice}} {{virtualWalletName}}</span>
                </div>
                <div class="add">
                    <div class="add-left">
                        <p>申购数量</p>
                        <div class="add-left">
                            <div class="number">
                                <span @click="subtract">
                                    <i class="el-icon-minus"></i>
                                </span>
                                <div>
                                    <div>{{purchase}}</div>
                                </div>
                                <span @click="addNum">
                                    <i class="el-icon-plus"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="add-right">
                        <p>签号数</p>
                        <!-- <input type="text" name id /> -->
                        <div style="line-height:40px">{{signNumber}}</div>
                    </div>
                </div>
                <ul class="detail">
                    <li>金额</li>
                    <li>{{purchaseAmount}} {{virtualWalletName}}</li>
                    <li>可用</li>
                    <li>{{canUseMoney}} {{virtualWalletName}}</li>
                </ul>
                <ul class="explain">
                    <li>申购说明</li>
                    <li>1、此项目的申购下限为{{productDetail.personalReservationBottomLimit}} token，申购上限为{{productDetail.personalReservationTopLimit}} token</li>
                    <li>2、一个签号数对应{{productDetail.unitPrice}} token</li>
                </ul>
                <!-- <el-button @click="verifyOne" class="btn" type="primary">确认</el-button> -->
                <el-button @click="confirmBuy" class="btn" type="primary">确认</el-button>
            </div>
            <!-- 输入资金密码 -->
            <div class="subscribe" v-if="subscribeShowOne==2?true:false">
                <div class="title">
                    <span></span>
                    <span>输入资金密码</span>
                    <span @click="colseSubscribe">
                        <img src="../../assets/images/daxin/close.png" alt />
                    </span>
                </div>
                <input
                    class="password"
                    maxlength="6"
                    v-model="dealPassword"
                    type="password"
                    name
                    id
                />
                <el-button @click="verifyTwo" class="btn" type="primary">确认</el-button>
            </div>
            <!-- 安全验证 -->
            <div class="subscribe" v-if="subscribeShowOne==3?true:false">
                <div class="title">
                    <span></span>
                    <span>安全验证</span>
                    <span @click="colseSubscribe">
                        <img src="../../assets/images/daxin/close.png" alt />
                    </span>
                </div>
                <div class="yzCode">
                    <p>已推送至 {{dealPhone}}</p>
                    <password ref="yzCode"></password>
                </div>
                <el-button @click="verifyThree" class="btn" type="primary">确认</el-button>
            </div>
            <!-- 申购成功 -->
            <div class="subscribe" v-if="subscribeShowOne==4?true:false">
                <div class="title">
                    <span></span>
                    <span>申购成功</span>
                    <span @click="colseSubscribe">
                        <img src="../../assets/images/daxin/close.png" alt />
                    </span>
                </div>
                <ul class="order">
                    <li>MATIC 项目</li>
                    <li>申请签号</li>
                    <li>
                        <span v-for="(v,i) in buyDetail.listUserPurchaseNumber" :key="i">{{v}}</span>
                    </li>
                    <li>
                        <span>申请价格：</span>
                        <span>{{productDetail.unitPrice}} {{virtualWalletName}}</span>
                    </li>
                    <li>
                        <span>申请数量：</span>
                        <span>{{buyDetail.purchaseQuantity}} token</span>
                    </li>
                    <li>
                        <span>申请总额：</span>
                        <span>{{buyDetail.purchaseTotalAmount}} {{virtualWalletName}}</span>
                    </li>
                    <li>
                        <span>时间：</span>
                        <span>{{buyDetail.createTime}}</span>
                    </li>
                </ul>
                <div @click="$router.push({path: '/purchaseHistory'})" class="seeOrderDetail">查看订单详情</div>
            </div>
        </div>
    </div>
</template>
<script>
import timer from "./timer";
import password from "./password";
import qs from "qs";
// import {
//     makeNewSettingDetails,
//     userMakeNewSettingRecord,
//     userBuy,
//     userVirtualWallet,
//     checkTradePassword,
//     checkPhoneCode,
//     sendCode,
//     Publicity,
//     signNumber,
//     checkTradeWord
// } from "../../api/api";
export default {
    data() {
        return {
            dealPhone: "",
            canUseMoney: "",
            virtualWalletName: this.$route.query.virtualWalletName,
            virtualWalletId: this.$route.query.virtualWalletId,
            //当前阶段倒计时结束时间
            endTime: "2019-08-21 16:12:00",
            //用户
            orLogin: window.sessionStorage.getItem("token"),
            userMsg: JSON.parse(window.sessionStorage.getItem("user")),
            //当前阶段状态
            productStatus: Number(this.$route.query.status) + 1,
            // productStatus:3,
            currentStatusOne: 1, //进度条
            currentStatusTwo: "", //申购状态
            currentStatusThree: "", //当前是否登录
            productDetail: [], //项目详情
            productId: this.$route.query.id, //项目id
            //申购购买
            buyStatus: "", //是否申购
            buyDetail: "", //申购后的内容
            bgShow: false,
            subscribeShowOne: 1,
            signNumber: "1", //签号数
            purchase: "", //申购数量
            purchaseAmount: "", //申购金额
            purchaseData: "", //申购所需参数
            dealPassword: "", //交易密码
            publicityNum: "", //中签公示
            signNumberList: [], //中签结果
            dealPasswordStatus:"",
        };
    },
    components: {
        timer,
        password
    },
    created() {
        this.jcurrentStatus();
        this.getActivityDetail();
        this.getBuyDetail();
        this.getBiMoney();
        this.dealPhoneNumver();
        this.publicity();
        this.settingPassOr();
    },
    mounted() {},
    methods: {
        // 中签公示
        publicity() {
            var params = {
                makeNewSettingId: this.productId
            };
            Publicity(params).then(res => {
                this.publicityNum = res.data.data;
                //console.log(this.publicityNum, 555);
            });
        },
        // 中签号码
        signNumbers() {
            var params = {
                token: JSON.parse(this.orLogin),
                makeNewSettingId: this.productId
            };
            signNumber(params).then(res => {
                //console.log(res.data, 99);
                if (res.data.data.length == "0") {
                    this.buyStatus = 1;
                } else {
                    this.buyStatus = 2;
                    this.signNumberList = res.data.data;
                }
            });
        },
        // 申购验证一：金额认证
        verifyOne() {

            if (
                this.purchase > this.productDetail.personalReservationTopLimit
            ) {
                this.$message({
                    message: "申购数量过大！"
                });
                return false;
            }

             if (
                this.purchase > 10000
            ) {
                this.$message({
                    message: "申购数量过大！"
                });
                return false;
            }
             if (
                this.signNumber > 27
            ) {
                this.$message({
                    message: "签号数量过多！"
                });
                return false;
            }
            // if (this.canUseMoney < this.purchaseAmount) {
            //     this.$message({
            //         message: "余额不足！"
            //     });
            //     return false;
            // }
            if(this.dealPasswordStatus != 1){
                this.$message({
                    message: "请先设置交易密码"
                });
                return false;
            }
            this.purchaseData = {
                token: JSON.parse(this.orLogin),
                makeNewSettingId: this.productId,
                purchaseQuantity: this.purchase,
                winningNumber: this.signNumber,
                purchaseTotalAmount: this.purchaseAmount,
                virtualWalletId: this.virtualWalletId,
                unitPrice: this.productDetail.unitPrice
            };
            this.subscribeShowOne = "3";
            this.sendYzCode();
            //console.log(this.purchaseData);
        },
        // 申购验证二：交易密码认证
        verifyTwo() {
            if (!this.dealPassword.match(/^\d{6}$/)) {
                this.$message({
                    message: "交易密码不能小于六位数！"
                });
                return false;
            }
            var params = {
                token: JSON.parse(this.orLogin),
                tradePassword: this.dealPassword
            };
            checkTradePassword(qs.stringify(params)).then(res => {
                if (res.data.code == 200) {
                    this.sendYzCode();
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        // 申购验证三：短信验证
        verifyThree() {
            var num = "";
            this.$refs.yzCode.pwdList.reverse();
            this.$refs.yzCode.pwdList.forEach(item => {
                num = item + num;
            });
            //console.log(num);
            var params = {
                token: JSON.parse(this.orLogin),
                phoneCode: num
            };
            checkPhoneCode(qs.stringify(params)).then(res => {
                if (res.data.code == 200) {
                    this.confirmBuy();
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        //确认购买
        confirmBuy() {
            if(this.userMsg.phoneNo==null){
                this.$message({
                    message: "暂无绑定手机号！"
                });
                return false;
            }
            if (
                this.purchase > this.productDetail.personalReservationTopLimit
            ) {
                this.$message({
                    message: "申购数量过大！"
                });
                return false;
            }
            this.purchaseData = {
                token: JSON.parse(this.orLogin),
                makeNewSettingId: this.productId,
                purchaseQuantity: this.purchase,
                winningNumber: this.signNumber,
                purchaseTotalAmount: this.purchaseAmount,
                virtualWalletId: this.virtualWalletId,
                unitPrice: this.productDetail.unitPrice
            };
            userBuy(qs.stringify(this.purchaseData)).then(res => {
                //console.log(res.data, 3333);
                if (res.data.code == 200) {
                    this.$message({
                        message: "申购成功！"
                    });
                    this.getBuyDetail();
                    this.subscribeShowOne = "4";
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        // 发送短信验证码
        sendYzCode() {
            var params = {
                phoneNo: this.userMsg.phoneNo,
                areaNo: this.userMsg.areaCode,
                type: 0
            };
            sendCode(params).then(res => {
                //console.log(res.data);
                if (res.data.code == 200) {
                    this.subscribeShowOne = "3";
                    this.dealPassword = "";
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        // 计算数量
        addNum() {
            // this.purchase += this.productDetail.configurationQuota;
              if (
                this.purchase > 10000
            ) {
                this.$message({
                    message: "申购数量过大！"
                });
                return false;
            }
             if (
                this.signNumber > 27
            ) {
                this.$message({
                    message: "签号数量过多！"
                });
                return false;
            }
            this.purchase = this.addFun(
                this.purchase,
                this.productDetail.configurationQuota
            );
            this.signNumber++;
            // this.purchaseAmount = this.purchase * this.productDetail.unitPrice;
            this.purchaseAmount = this.mulFun(
                this.purchase,
                this.productDetail.unitPrice
            );
        },
        subtract() {
            if (
                this.purchase - this.productDetail.configurationQuota <
                this.productDetail.configurationQuota
            )
                return false;
            this.purchase = this.subFun(
                this.purchase,
                this.productDetail.configurationQuota
            );
            this.signNumber--;
            this.purchaseAmount = this.mulFun(
                this.purchase,
                this.productDetail.unitPrice
            );
        },

        // 初始化-----------------------------------------------
        //获取申购阶段详情
        getBuyDetail() {
            var pramas = {
                token: JSON.parse(this.orLogin),
                makeNewSettingId: this.productId
            };
            userMakeNewSettingRecord(pramas).then(res => {
                if (res.data.code == 200) {
                    if (res.data.data == null || res.data.data == "") {
                        this.buyStatus = 1;
                    } else {
                        this.buyStatus = 2;
                        this.buyDetail = res.data.data;
                        //console.log(this.buyDetail, 22);
                    }
                }
            });
        },
        //获取活动详情
        getActivityDetail() {
            var params = {
                id: this.productId
            };
            makeNewSettingDetails(params).then(res => {
                console.log(res.data.data,666666);
                this.productDetail = res.data.data;
                this.purchase = this.productDetail.configurationQuota;
                this.purchaseAmount =
                    this.productDetail.configurationQuota *
                    this.productDetail.unitPrice;
                this.getEndTime();
            });
        },
        // 判断申购周期的状态
        jcurrentStatus() {
            //console.log(this.productStatus, 333);
            if (this.orLogin == null) {
                this.currentStatusThree = "10";
                this.currentStatusOne = this.productStatus;
            } else {
                this.currentStatusThree = "-10";
                this.currentStatusOne = this.currentStatusTwo = this.productStatus;
            }
        },
        // 获取币种可用余额
        getBiMoney() {
            var params = {
                token: JSON.parse(this.orLogin),
                virtuaWalletName: this.virtualWalletName
            };
            userVirtualWallet(params).then(res => {
                //console.log(res.data);
                this.canUseMoney = res.data.data[0].availableAmount;
            });
        },
        //是否设置交易密码
        settingPassOr(){
            var params={
                token:JSON.parse(this.orLogin)
            }
            checkTradeWord(qs.stringify(params)).then(res => {
                //console.log(res.data,999)
                this.dealPasswordStatus = res.data.data
            })
        },

        //状态----------------------------------------------
        //打开申购界面
        buySome() {
            (this.bgShow = true), (this.subscribeShowOne = 1);
            // if (this.userMsg.authorizeLevel == 2) {
            //     (this.bgShow = true), (this.subscribeShowOne = 1);
            // } else {
            //     this.$message({
            //         message: "请到APP端进行申购认证！"
            //     });
            // }
        },
        // 获取当前需要倒计时的时间
        getEndTime() {
            if (this.productStatus == "1") {
                this.endTime = this.productDetail.purchaseStartTime;
            } else if (this.productStatus == "2") {
                this.endTime = this.productDetail.purchaseEndTime;
            } else if (this.productStatus == "3") {
                this.endTime = this.productDetail.signedTheTime;
            } else if (this.productStatus == "4") {
                this.endTime = this.productDetail.signedTheTime;
                this.signNumbers();
            }
        },
        //关闭申购弹出界面
        colseSubscribe() {
            this.bgShow = false;
            this.subscribeShowOne = -1;
        },
        //精度计算方式
        mulFun(arg1, arg2) {
            var m = 0,
                s1 = arg1.toString(),
                s2 = arg2.toString();
            try {
                m += s1.split(".")[1].length;
            } catch (e) {}
            try {
                m += s2.split(".")[1].length;
            } catch (e) {}
            return (
                (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
                Math.pow(10, m)
            );
        },
        addFun(arg1, arg2) {
            var r1, r2, m;
            try {
                r1 = arg1.toString().split(".")[1].length;
            } catch (e) {
                r1 = 0;
            }
            try {
                r2 = arg2.toString().split(".")[1].length;
            } catch (e) {
                r2 = 0;
            }
            m = Math.pow(10, Math.max(r1, r2));
            return (arg1 * m + arg2 * m) / m;
        },
        subFun(arg1, arg2) {
            var r1, r2, m, n;
            try {
                r1 = arg1.toString().split(".")[1].length;
            } catch (e) {
                r1 = 0;
            }
            try {
                r2 = arg2.toString().split(".")[1].length;
            } catch (e) {
                r2 = 0;
            }
            m = Math.pow(10, Math.max(r1, r2));
            n = r1 >= r2 ? r1 : r2;
            return ((arg1 * m - arg2 * m) / m).toFixed(n);
        },
        dealPhoneNumver() {
            var phone = this.userMsg.phoneNo;
            this.dealPhone = phone.substr(0, 3) + "****" + phone.substr(7);
        }
    },
    filters: {
        baifenbi(val) {
            if (val == null || val == "") {
                val = 0;
                return val;
            } else {
                return (val = val * 100 + "%");
            }
        }
    }
};
</script>
<style lang="less" scoped>
.number {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 180px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 4px;
    span {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    span:first-child {
        border-right: 1px solid #eee;
    }
    span:last-child {
        border-left: 1px solid #eee;
    }
    div {
        width: 100px;
        text-align: center;
    }
}
.an-btn {
    width: 100%;
    margin: 20px 0;
}
.an-btn-an {
    width: 100%;
    margin: 20px 0;
    background-color: #c5cfd5;
    color: #fff;
    border: 1px solid #c5cfd5;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
}
.seeOrderDetail {
    width: 70%;
    margin: 10px auto;
    padding: 10px 20px;
    color: #6881ff;
    border: 1px solid #6881ff;
    border-radius: 30px;
    text-align: center;
}
//标题
.title-type {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    color: #2d2f56;
    font-size: 16px;
    font-weight: bold;
}
.title-types {
    width: 100%;
    padding: 10px 15px 0;
    box-sizing: border-box;
    background-color: #f7f7fb;
    color: #6881ff;
    font-size: 14px;
    font-weight: bold;
}
.four-title {
    padding-bottom: 10px;
}
.cycle {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .cycle-left {
        width: 70%;
        .cycle-left-one {
            width: 90%;
            margin: 30px 0;
            padding-bottom: 40px;
            border-bottom: 1px solid #eee;
            .el-step__title {
                font-size: 12px !important;
            }
        }
        .cycle-left-two {
            div:first-child {
                span {
                    font-size: 10px;
                    background-color: #8285ae;
                    color: #fff;
                    padding: 6px 15px;
                    border-radius: 20px;
                }
            }
            ul:nth-child(2) {
                padding-left: 20px;
                margin: 30px 0 60px;
                li {
                    list-style: disc;
                    color: #2d2f56;
                    font-size: 12px;
                }
                li:nth-child(2) {
                    list-style: none;
                    color: #6881ff;
                    margin-top: 20px;
                }
            }
        }
    }
    .cycle-right {
        width: 28%;
        box-shadow: 0 2px 5px 0px #e6e6e6;
        .cycle-right-center {
            padding: 15px 15px 0;
            box-sizing: border-box;
            .one {
                li:first-child {
                    font-size: 14px;
                    font-weight: bold;
                    color: #2d2f56;
                    margin-bottom: 15px;
                }
                li:nth-child(2) {
                    padding: 10px 10px;
                    box-sizing: border-box;
                    border: 1px solid #f9f9f9;
                    background-color: #fafbff;
                    text-align: center;
                    border-radius: 20px;
                    color: #ff4242;
                    font-size: 12px;
                    margin-bottom: 20px;
                }
                li:nth-child(3) {
                    text-align: center;
                    font-size: 12px;
                    color: #2d2f56;
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                li:nth-child(4) {
                    text-align: center;
                    font-size: 12px;
                    color: #8c979d;
                    margin-bottom: 15px;
                }
            }
            .two {
                font-size: 12px;
                color: #8c979d;
                li {
                    margin-bottom: 10px;
                }
                li:first-child {
                    font-weight: bold;
                    color: #2d2f56;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #eee;
                }
                li:nth-child(3) {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    span {
                        display: inline-block;
                        padding: 6px 10px;
                        color: #ffa043;
                        background-color: #fff4cc;
                        border-radius: 20px;
                        margin: 0 20px 10px 0;
                    }
                }
                li:nth-child(4),
                li:nth-child(5),
                li:nth-child(6) {
                    span:last-child {
                        color: #15151c;
                        margin-left: 10px;
                    }
                }
                li:nth-child(7) {
                    text-align: center;
                    color: #6881ff;
                    padding-top: 10px;
                }
            }
            .four {
                color: #8c979d;
                li {
                    margin: 20px 0;
                }
                li:first-child {
                    text-align: center;
                }
                li:nth-child(2) {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    font-size: 10px;
                    span {
                        display: inline-block;
                        padding: 6px 10px;
                        color: #ffa043;
                        background-color: #fff4cc;
                        border-radius: 20px;
                        margin: 0 20px 10px 0;
                    }
                }
                li:nth-child(3) {
                    text-align: center;
                    > span {
                        padding: 8px 20px;
                        color: #6881ff;
                        border: 1px solid #6881ff;
                        border-radius: 30px;
                    }
                }
            }
            .publicity {
                padding: 40px 20px;
                box-sizing: border-box;
                ul {
                    li {
                        margin-bottom: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span:first-child {
                            color: #8c979d;
                        }
                        span:last-child {
                            color: #2d2f56;
                        }
                    }
                    li:first-child {
                        font-size: 14px;
                        font-weight: bold;
                        color: #2d2f56;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #eee;
                    }
                }
            }
        }
    }
}
//弹框
.bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    .subscribe {
        width: 500px;
        margin: 200px auto 0;
        background-color: #fff;
        padding: 20px 40px;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 14px;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
        }
        .price {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            background-color: #ebeeff;
            border-radius: 10px;
            margin: 30px 0;
        }
        .add {
            display: flex;
            justify-content: space-between;
            > div {
                p {
                    margin-bottom: 10px;
                    color: #bac5cb;
                }
            }
            .add-left {
                width: 60%;
            }
            .add-right {
                width: 30%;
                > div {
                    width: 100%;
                    height: 38px;
                    border-radius: 4px;
                    outline: none;
                    border: 1px solid #e6e6e6;
                    text-align: center;
                }
            }
        }
        .detail {
            color: #bac5cb;
            margin: 30px 0;
            li {
                margin-bottom: 15px;
            }
            li:nth-child(2) {
                font-weight: bold;
                color: #2d2f56;
            }
        }
        .explain {
            padding: 30px 0;
            border-top: 1px solid #eee;
            li {
                color: #8c979d;
                margin-bottom: 15px;
            }
            li:first-child {
                margin-bottom: 20px;
            }
        }
        .btn {
            width: 100%;
            background-color: #6881ff;
            height: 50px;
        }
        .password {
            width: 100%;
            height: 35px;
            margin: 40px 0;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            padding: 0 15px;
            box-sizing: border-box;
            letter-spacing: 5px;
            font-weight: bold;
        }
        .yzCode {
            > p {
                margin: 30px 0;
                color: #6881ff;
                font-size: 12px;
            }
        }
        .order {
            li {
                margin-bottom: 30px;
                font-size: 12px;
                color: #bac5cb;
                > span:last-child {
                    color: #2d2f56;
                }
            }
            li:first-child {
                color: #2d2f56;
                font-weight: bold;
            }
            li:nth-child(3) {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                font-size: 10px;
                span {
                    display: inline-block;
                    padding: 6px 10px;
                    color: #ffa043;
                    background-color: #fff4cc;
                    border-radius: 20px;
                    margin: 0 20px 10px 0;
                }
            }
        }
    }
}
</style>